<!-- pages/songs/detail.vue 歌曲详情页 -->
<template>
    <view class="song-detail-page" v-if="currentSong">
        <view class="header">
            <text class="title">{{ currentSong.name }}</text>
            <text class="description">{{ currentSong.description }}</text>
        </view>

        <view class="tab-container">
            <view v-for="tab in tabs" :key="tab.value" class="tab-item" :class="{ active: activeTab === tab.value }"
                @click="activeTab = tab.value">
                {{ tab.label }}
            </view>
        </view>

        <!-- 歌词部分 -->
        <scroll-view v-show="activeTab === 'lyrics'" class="content-container" scroll-y>
            <view class="lyric-item" v-for="(line, index) in currentSong.lyrics" :key="index">
                {{ line }}
            </view>
        </scroll-view>

        <!-- 场景部分 -->
        <scroll-view v-show="activeTab === 'scenes'" class="content-container" scroll-y>
            <view class="scene-item" v-for="scene in currentSong.scenes" :key="scene.id">
                <text class="scene-title">{{ scene.name }}</text>
                <text class="scene-desc">{{ scene.description }}</text>

                <view class="media-container" v-if="scene.images.length">
                    <image v-for="(img, idx) in scene.images" :key="idx" :src="img" mode="aspectFill"
                        class="scene-image" />
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useSongStore } from '@/stores/songs';

const songStore = useSongStore();
const props = defineProps(['id']);
const activeTab = ref('lyrics');
const tabs = [
    { label: '歌词', value: 'lyrics' },
    { label: '场景', value: 'scenes' }
];
const curId = ref(0);
const currentSong = computed(() => {
    return songStore.songs.find(song => song.id === curId.value);
});

onLoad((options) => {
    curId.value = parseInt(options.id);
    // 确保数据加载
    songStore.fetchSongs();
    uni.setNavigationBarTitle({
        title: currentSong.value?.name || '歌曲详情'
    });
});
</script>

<style lang="scss" scoped>
.song-detail-page {
    padding: 30rpx;
    background: #f5f5f5;
    min-height: 100vh;

    .header {
        margin-bottom: 40rpx;

        .title {
            display: block;
            font-size: 40rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 16rpx;
        }

        .description {
            font-size: 28rpx;
            color: #666;
        }
    }

    .tab-container {
        display: flex;
        margin-bottom: 30rpx;
        background: white;
        border-radius: 12rpx;
        overflow: hidden;

        .tab-item {
            flex: 1;
            text-align: center;
            padding: 24rpx 0;
            font-size: 30rpx;
            color: #666;
            transition: all 0.3s;

            &.active {
                color: #007AFF;
                background: #e6f3ff;
            }
        }
    }

    .content-container {
        height: calc(100vh - 360rpx);
        padding: 20rpx;
        background: white;
        border-radius: 12rpx;

        .lyric-item {
            padding: 24rpx 0;
            font-size: 28rpx;
            color: #333;
            border-bottom: 1rpx solid #eee;

            &:last-child {
                border-bottom: none;
            }
        }

        .scene-item {
            padding: 30rpx 0;
            border-bottom: 1rpx solid #eee;

            .scene-title {
                display: block;
                font-size: 30rpx;
                color: #333;
                margin-bottom: 12rpx;
                font-weight: 500;
            }

            .scene-desc {
                font-size: 26rpx;
                color: #666;
            }

            .media-container {
                margin-top: 20rpx;
                display: flex;
                gap: 20rpx;

                .scene-image {
                    width: 200rpx;
                    height: 150rpx;
                    border-radius: 8rpx;
                }
            }
        }
    }
}
</style>